<template>
  <view class="film-card" :class="[customClass, { 'is-selected': selected, 'is-disabled': disabled }]" @click="handleClick">
    <image class="card-bg" :src="info.surfaceImage || useImage('/zuimei-film-oss/1.0.0/images/card-bg.png')" mode="aspectFill" />
    <view class="card-content">
      <!-- 禁用的不显示 -->
      <view v-if="info.isBeGoingToExpire && !disabled" class="expire-tips" :style="[useThemeStyle()]">将到期</view>
      <view v-if="showType === 'select'" class="select-tips">
        <zm-transition mode="fade-zoom" :show="selected" :custom-style="{ 'text-align': 'right' }">
          <zm-icon name="check" :color="useColor('theme')" size="40rpx" weight="bold"></zm-icon>
        </zm-transition>
      </view>
      <text class="card-no">NO.{{ info.cardCode }}</text>
      <text class="card-name">{{ name }}</text>
      <view class="card-point-wrap" :class="{ 'pr-40': showType === 'select' }">
        <text class="card-point">{{ info.point | formatDigit }}</text>
        <text class="unit-text">点</text>
      </view>
      <text class="date-text">{{ info.sD || info.startTime }}至{{ info.eD || info.endTime }}</text>
    </view>
    <slot name="status"></slot>
    <slot name="footer"></slot>
  </view>
</template>

<script>
import { mapGetters } from "vuex"
import weixin from "@/mixins/weixin.js"
const nameList = ["", "点卡", "次卡"]
export default {
  name: "film-card",
  mixins: [weixin],
  props: {
    info: {
      type: Object,
      default: () => {}
    },
    // select 选择模式， detail 查看模式
    showType: {
      type: String,
      default: "detail"
    },
    // 是否选中
    selected: {
      type: Boolean,
      default: false
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      value: true
    },
    customClass: {
      type: String,
      default: ""
    }
  },
  data() {
    return {}
  },
  computed: {
    ...mapGetters(["cardName"]),
    name() {
      if (this.info.type == 1) return this.cardName
      return nameList[this.info.type]
    }
  },
  methods: {
    handleClick() {
      this.$emit("click", this.info)
    }
  }
}
</script>

<style lang="scss" scoped>
.film-card {
  display: flex;
  height: 360rpx;
  overflow: hidden;
  position: relative;
  background: #fff;
  border-radius: 24rpx;
  flex-direction: column;

  .card-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 360rpx;
    position: absolute;
    pointer-events: none;
  }
  .card-content {
    flex: 1;
    z-index: 2;
    display: flex;
    padding: 26rpx 26rpx 34rpx 34rpx;
    position: relative;
    min-height: 360rpx;
    flex-direction: column;

    .expire-tips {
      top: 0;
      left: 0;
      z-index: 1;
      height: 32rpx;
      display: flex;
      font-size: 20rpx;
      padding: 0 18rpx;
      position: absolute;
      align-items: center;
      background: #ff7538;
      background-color: #fff;
      border-radius: 24rpx 0rpx 24rpx 0rpx;
    }
    .select-tips {
      top: 0;
      right: 0;
      width: 100rpx;
      height: 100rpx;
      position: absolute;
      padding-top: 12rpx;
      padding-right: 12rpx;
      &::before {
        top: 0;
        right: 0;
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        transition: all 0.3s ease;
        border-top: 100rpx solid rgba(255, 255, 255, 0.5);
        border-left: 100rpx solid transparent;
      }
    }

    .card-name {
      color: #fff;
      font-size: 30rpx;
      font-weight: bold;
      margin-top: 6rpx;
    }
    .card-point-wrap {
      color: #fff;
      display: table-cell;
      vertical-align: bottom;
      .card-point {
        font-size: 70rpx;
        font-weight: bold;
      }
      .unit-text {
        font-size: 26rpx;
        font-weight: bold;
      }
    }
    .date-text {
      color: #fff;
      font-size: 26rpx;
      margin-top: auto;
      font-weight: 500;
    }
    .card-no {
      color: #fff;
      font-size: 26rpx;
      font-weight: 500;
      text-align: right;
    }
  }
  &.is-selected {
    .select-tips::before {
      border-top: 100rpx solid #fff !important;
    }
  }

  &.is-disabled {
    .card-bg {
      filter: grayscale(100%);
    }
    .card-name,
    .card-point-wrap,
    .date-text,
    .card-no {
      color: #f5f5f5 !important;
    }
  }
}
</style>
